<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Ingresar al Portal</title>                
        <link href="resources/sistema/login.css" rel="stylesheet" type="text/css" />
        <!--Slider-in icons-->
        <script type="text/javascript">
            $(document).ready(function() {
                $(".username").focus(function() {
                    $(".user-icon").css("left", "-48px");
                });
                $(".username").blur(function() {
                    $(".user-icon").css("left", "0px");
                });

                $(".password").focus(function() {
                    $(".pass-icon").css("left", "-48px");
                });
                $(".password").blur(function() {
                    $(".pass-icon").css("left", "0px");
                });
            });
        </script>
    </h:head>    
    <h:body>  
        <p:growl autoUpdate="true" sticky="true"/>          
        <div id="wrapper">
            <div class="user-icon"></div>
            <div class="pass-icon"></div>            
            <h:form id="login-form" class="login-form">
                <div class="header">
                    <h1>Ingresar al Portal</h1>
                    <span>Sistema de Gestión Académca.</span>
                </div>
                <div class="content">
                    <h:inputText id="username" styleClass="input username" value="#{controladorLogin.usuario}" autocomplete="off"  required="true" requiredMessage="Debe Ingresar su Usuario"/>
                    <h:inputSecret id="password" styleClass="input password" value="#{controladorLogin.clave}" required="true" requiredMessage="Debe Ingresar su Clave"/>
                    <p:watermark for="username" value="Usuario"/>
                    <p:focus for="username"/>
                    <p:watermark for="password" value="Clave"/>
                </div>
                <div class="footer">
                    <h:commandButton id="submit" value="Ingresar" styleClass="button" action="#{controladorLogin.ingresar}"/>
                </div>                
            </h:form>            
        </div>        
        <div class="gradient"></div>
    </h:body>
</html>

